<!--
1. 导入vue
2. 创建vue作用的div
3. 创建vue实例对象
4. 在vm实例中,如果想要获取data中的数据,或者想要调用methods中的方法,
   必须要通过 this.属性名 或者 this.方法名 来进行访问.
5. vm实例中,data只要改变,那么页面上的数据就会自动同步,减少了对dom的操作
6. =>函数 能够让函数内部的this和外部的this保持一致
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="zmj" >开始循环</button>
        <button @click="stop">结束循环</button>
        <h4>{{msg}}</h4>
    </div>


    <script>
        var vm=new Vue({
            el: "#app",
            data:{
                msg: "周梦杰",
                timer:null,
            },
            methods:{
                zmj() {
                    if(this.timer==null) {
                        this.timer = setInterval(() => {
                            var start = this.msg.substring(0, 1);
                            var end = this.msg.substring(1);
                            this.msg = end + start;
                        }, 400)
                    }
                },
                stop(){
                    clearInterval(this.timer);
                    this.timer=null;
                }
            }
        })
    </script>
</body>
</html>